<template>
  <div class="page-operation">
    <el-button type="primary" @click="handleInsertAdmin">Insert Admin</el-button>
  </div>

  <div class="page-filter">
    <el-form inline @submit.prevent="handleSearch" :disabled="isLoadingList">
      <el-form-item label="Status">
        <el-select v-model="adminListParams.status">
          <el-option value label="All"></el-option>
          <el-option value="1" label="Active"></el-option>
          <el-option value="0" label="Inactive"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Name">
        <el-input clearable v-model="adminListParams.name"></el-input>
      </el-form-item>
      <el-form-item label>
        <el-button type="primary" native-type="submit">Search</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="page-container" v-loading="isLoadingList">
    <el-table border stripe :data="adminList">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="account" label="Account" />
      <el-table-column prop="real_name" label="Name" />
      <el-table-column label="Roles" show-overflow-tooltip>
        <template #default="scope">{{ scope.row.roles.replaceAll(',', '、') }}</template>
      </el-table-column>
      <el-table-column prop="_last_time" label="Last Sign in Time" />
      <el-table-column prop="last_ip" label="Last Sign in IP" />
      <el-table-column prop="status" label="Status" width="80">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            :loading="scope.row.loading"
            @change="handleUpdateAdminStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="right" label="Action" width="100">
        <template #default="scope">
          <el-button type="text" @click="handleUpdateAdmin(scope.row)">Edit</el-button>
          <el-popconfirm
            title="It cannot be restored after deletion. Are you sure you want to delete it ?"
            @confirm="handleDeleteAdmin(scope.row)"
          >
            <template #reference>
              <el-button type="text" size>Delete</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-model:size="adminListParams.limit"
      v-model:index="adminListParams.page"
      :total="adminTotal"
      :on-change="handleGetAdminList"
    />
  </div>

  <EditAdmin v-model="editVisible" v-model:id="adminID" @submit="handleGetAdminList" />
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { getAdminList, deleteAdmin, updateAdminStatus } from '@/api/admin'
import Pagination from '@/components/pagination/index.vue'
import EditAdmin from './edit.vue'

// 1. get admin list
const adminList = ref<AdminInfoType[]>([])
const adminListParams = reactive({
  page: 1, // page index
  limit: 10, // page size
  name: '',
  roles: '',
  status: '',
})
const adminTotal = ref(0)

const isLoadingList = ref(false)

function handleGetAdminList() {
  isLoadingList.value = true

  getAdminList(adminListParams)
    .then(res => {
      adminList.value = res.list
      adminTotal.value = res.count
    })
    .finally(() => {
      isLoadingList.value = false
    })
}

onMounted(() => {
  handleGetAdminList()
})

function handleSearch() {
  adminListParams.page = 1
  handleGetAdminList()
}

// 2. insert admin
const editVisible = ref(false)

const adminID = ref<null | number>(null)

function handleInsertAdmin() {
  adminID.value = null
  editVisible.value = true
}

// 3. update admin
function handleUpdateAdmin(admin: AdminInfoType) {
  adminID.value = admin.id
  editVisible.value = true
}

// 4. update admin status
function handleUpdateAdminStatus(row: AdminInfoType) {
  const { id, status } = row
  row['loading'] = true
  updateAdminStatus(id, status).finally(() => {
    handleGetAdminList()
  })
}

// 4. delete admin
async function handleDeleteAdmin({ id }: AdminInfoType) {
  await deleteAdmin(id)
  handleGetAdminList()
}
</script>
